﻿<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="test.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

</head>
<body>
	<div>
	<ul class = "container">
		<li class = "menu">
			<ul>
				<li>
					<a href = "#" class = "button blue">Node</a>
				</li>
				<li class="dropdown">
					<ul> 
						<li><a href="http://en.wikipedia.org/wiki/Kiwifruit">Read on Wikipedia</a></li>
						<li><a href="http://www.flickr.com/search/?w=all&amp;q=kiwi&amp;m=text">Flickr Stream</a></li>
					</ul>
				</li>
			</ul>
		</li>
		
		<li class = "menu">
			<ul>
				<li>
					<a href = "#" class = "button green">Node</a>
				</li>
				<li class="dropdown">
					<ul> 
						<li><a href="http://en.wikipedia.org/wiki/Kiwifruit">Read on Wikipedia</a></li>
						<li><a href="http://www.flickr.com/search/?w=all&amp;q=kiwi&amp;m=text">Flickr Stream</a></li>
					</ul>
				</li>
			</ul>
		</li>
		
		<li class = "menu">
			<ul>
				<li>
					<a href = "#" class = "button blue">Nodetest</a>
				</li>
				<li class="dropdown">
					<ul> 
						<li><a href="http://en.wikipedia.org/wiki/Kiwifruit">Read on Wikipedia</a></li>
						<li><a href="http://www.flickr.com/search/?w=all&amp;q=kiwi&amp;m=text">Flickr Stream</a></li>
					</ul>
				</li>
			</ul>
		</li>
		
	</ul>
	</div>
</body>
<script> 
$(document).ready(function(){
	$.easing.def = "easeOutBounce";
	$('a.button').click(function(e){
		var dropDown = $(this).parent().next();
		
		/* Closing all other drop down sections, except the current one */
		$('.dropdown').not(dropDown).slideUp('slow');
		dropDown.slideToggle('slow');

		/* Preventing the default event (which would be to navigate the browser to the link's address) */
		e.preventDefault();
		
	})
})
</script>
</html>